<template>
	<view class="mainPage" :style="{'padding-top': `${$store.state.safeArea.top || 0}px`, 'padding-bottom': `${$store.state.safeArea.bottom || 0}px`}">
		<public-head :title="title"></public-head>
		<view class="box">
			<u-tabs-swiper class="uTabs" ref="uTabs" inactive-color="#706F6F"  active-color="#FE7B09" :height="68" font-size="28" :list="list" :current="current" @change="tabsChange" :is-scroll="false" swiperWidth="750"></u-tabs-swiper>
			<swiper class="swiper" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
				<swiper-item class="swiper-item"  >
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom">
						<view class="yuyuedingdan-list">
							
							<view class="" v-if="quanbuList.length">
								<view class="yuyuedingdan-item" v-for="(item,index) in quanbuList" :key="index"  @click="jump(item.order_sn,item.status)">
									<view class="first-line">
										<view class="left">
											<image class="touxiang" :src="item.avatar" mode=""></image>
											<text class="name">{{item.nickname}}</text>
											<text class="pet-info">
												<!-- <text v-if="item.race==1">猫</text>
												<text v-else-if="item.race==2">狗</text>
												<text v-else>其他</text> -->
												<text v-if="item.race==1">猫</text>
												<text v-else-if="item.race==2">狗</text>
												<text v-else>其他</text>
												
												<text v-if="item.sex==0">母</text>
												<text v-else>公</text>
												{{item.weight}}kg
											</text>
										</view>
										<view class="right">
											<text class="zhuangtai" v-if="item.status==0">待就诊</text>
											<text class="zhuangtai active" v-else-if="item.status==2">已取消</text>
											<text class="zhuangtai active" v-else-if="item.status==1">已完成</text>
											<text class="zhuangtai" v-else>待评价</text>
										</view>
									</view>
									<view class="second-line">
										<view class="wenzhenleixing">
											预约时间：
										</view>
										<view class="time">
											{{item.date}}
										</view>
										<view class="shijian">
										</view>
									</view>
									<view class="third-line">
										<view class="left">
											<view class="yuyuedianhua">
												预约电话：
											</view>
											<view class="dianhuahao">
												{{item.phone}}
											</view>
										</view>
										<view class="right">
											¥ {{item.price}}
										</view>
									</view>
					
								</view>
							</view>
							<view class="zanwuyuyue" v-else>
								<image src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/icon/zanwu.png" mode=""></image>
								<text>暂无预约</text>
							</view>
							
						
						</view>
					</scroll-view>
				</swiper-item>
				
				<swiper-item class="swiper-item"  >
					
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom">
						<view class="yuyuedingdan-list">
							
							<view class="" v-if="daijiuzhenList.length">
								<view class="yuyuedingdan-item" v-for="(item,index) in daijiuzhenList" :key="index"  @click="jump(item.order_sn,item.status)">
									<view class="first-line">
										<view class="left">
											<image class="touxiang" :src="item.avatar" mode=""></image>
											<text class="name">{{item.nickname}}</text>
											<text class="pet-info">
												<!-- <text v-if="item.race==1">猫</text>
												<text v-else-if="item.race==2">狗</text>
												<text v-else>其他</text> -->
												<text v-if="item.race==1">猫</text>
												<text v-else-if="item.race==2">狗</text>
												<text v-else>其他</text>
												
												<text v-if="item.sex==0">母</text>
												<text v-else>公</text>
												{{item.weight}}kg
											</text>
										</view>
										<view class="right">
											<text class="zhuangtai" v-if="item.status==0">待就诊</text>
											<text class="zhuangtai active" v-else-if="item.status==2">已取消</text>
											<text class="zhuangtai active" v-else-if="item.status==1">已完成</text>
											<text class="zhuangtai" v-else>待评价</text>
										</view>
									</view>
									<view class="second-line">
										<view class="wenzhenleixing">
											预约时间：
										</view>
										<view class="time">
											{{item.date}}
										</view>
										<view class="shijian">
											
										</view>
									</view>
									<view class="third-line">
										<view class="left">
											<view class="yuyuedianhua">
												预约电话：
											</view>
											<view class="dianhuahao">
												{{item.phone}}
											</view>
										</view>
										<view class="right">
											¥ {{item.price}}
										</view>
									</view>
					
								</view>
							</view>
							<view class="zanwuyuyue" v-else>
								<image src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/icon/zanwu.png" mode=""></image>
								<text>暂无预约</text>
							</view>
							
						
						</view>
					</scroll-view>
				</swiper-item>
				
				<swiper-item class="swiper-item"  >
					
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom">
						<view class="yuyuedingdan-list">
							
							<view class="" v-if="yiwanchengList.length">
								<view class="yuyuedingdan-item" v-for="(item,index) in yiwanchengList" :key="index"  @click="jump(item.order_sn,item.status)">
									<view class="first-line">
										<view class="left">
											<image class="touxiang" :src="item.avatar" mode=""></image>
											<text class="name">{{item.nickname}}</text>
											<text class="pet-info">
												<!-- <text v-if="item.race==1">猫</text>
												<text v-else-if="item.race==2">狗</text>
												<text v-else>其他</text> -->
												<text v-if="item.race==1">猫</text>
												<text v-else-if="item.race==2">狗</text>
												<text v-else>其他</text>
												
												<text v-if="item.sex==0">母</text>
												<text v-else>公</text>
												{{item.weight}}kg
											</text>
										</view>
										<view class="right">
											<text class="zhuangtai" v-if="item.status==0">待就诊</text>
											<text class="zhuangtai active" v-else-if="item.status==2">已取消</text>
											<text class="zhuangtai active" v-else-if="item.status==1">已完成</text>
											<text class="zhuangtai" v-else>待评价</text>
										</view>
									</view>
									<view class="second-line">
										<view class="wenzhenleixing">
											预约时间：
										</view>
										<view class="time">
											{{item.date}}
										</view>
										<view class="shijian">
											
										</view>
									</view>
									<view class="third-line">
										<view class="left">
											<view class="yuyuedianhua">
												预约电话：
											</view>
											<view class="dianhuahao">
												{{item.phone}}
											</view>
										</view>
										<view class="right">
											¥ {{item.price}}
										</view>
									</view>
					
								</view>
							</view>
							<view class="zanwuyuyue" v-else>
								<image src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/icon/zanwu.png" mode=""></image>
								<text>暂无预约</text>
							</view>
							
						
						</view>
					</scroll-view>
				</swiper-item>
				
				<swiper-item class="swiper-item"  >
					
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom">
						<view class="yuyuedingdan-list">
							
							<view class="" v-if="daipingjiaList.length">
								<view class="yuyuedingdan-item" v-for="(item,index) in daipingjiaList" :key="index"  @click="jump(item.order_sn,item.status)">
									<view class="first-line">
										<view class="left">
											<image class="touxiang" :src="item.avatar" mode=""></image>
											<text class="name">{{item.nickname}}</text>
											<text class="pet-info">
												<!-- <text v-if="item.race==1">猫</text>
												<text v-else-if="item.race==2">狗</text>
												<text v-else>其他</text> -->
												<text v-if="item.race==1">猫</text>
												<text v-else-if="item.race==2">狗</text>
												<text v-else>其他</text>
												
												<text v-if="item.sex==0">母</text>
												<text v-else>公</text>
												{{item.weight}}kg
											</text>
										</view>
										<view class="right">
											<text class="zhuangtai" v-if="item.status==0">待就诊</text>
											<text class="zhuangtai active" v-else-if="item.status==2">已取消</text>
											<text class="zhuangtai active" v-else-if="item.status==1">已完成</text>
											<text class="zhuangtai" v-else>待评价</text>
										</view>
									</view>
									<view class="second-line">
										<view class="wenzhenleixing">
											预约时间：
										</view>
										<view class="time">
											{{item.date}}
										</view>
										<view class="shijian">
											
										</view>
									</view>
									<view class="third-line">
										<view class="left">
											<view class="yuyuedianhua">
												预约电话：
											</view>
											<view class="dianhuahao">
												{{item.phone}}
											</view>
										</view>
										<view class="right">
											¥ {{item.price}}
										</view>
									</view>
					
								</view>
							</view>
							<view class="zanwuyuyue" v-else>
								<image src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/icon/zanwu.png" mode=""></image>
								<text>暂无预约</text>
							</view>
						
						</view>
					</scroll-view>
				</swiper-item>
				
			</swiper>
			
			<!-- <view class="nomore">
				没有更多了～
			</view> -->
		</view>
	</view>
</template>

<script>
	var that
	import publicHead from "@/components/publicHead/publicHead.vue"
	export default {
		components: {
			publicHead
		},
		data() {
			return {
				title: '预约管理',
				
				list: [
					{
						name: '全部'
					}, 
					{
						name: '待就诊'
					}, 
					{
						name: '已完成'
					},
					{
						name: '待评价'
					}
				],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				
				quanbuList:[],
				
				daijiuzhenList:[], 
				yiwanchengList:[],
				daipingjiaList:[],
			}
		},
		onLoad() {
			that=this
			// that.requestData()
		},
		onShow() {
			that.requestData()
		},
		methods: {
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
				//在这调用接口
				// console.log(that.current,that.swiperCurrent,88)
				// if(that.contentList[current]==""){  // 值为空时继续请求接口
				// 	that.requestData(that.swiperCurrent)
				// }else{
				// 	return
				// 	uni.showToast({
				// 		title:"第二次啦"
				// 	})
				// }
			},
			// scroll-view到底部加载更多
			onreachBottom() {
				console.log("scroll-view到底部加载更多")
			},
			
			
			requestData(){  //https://ask.suoweilai.com/PetDoctor_Reservation_Orders  医生端-预约管理 - 预约管理-订单列表
			
				uni.showLoading({
					mask: true
				});
				that.$postAjax1('PetDoctor_Reservation_Orders','',function(data){
					uni.hideLoading();
					that.quanbuList=data.data.data.All
					
					that.daijiuzhenList=data.data.data.To_be_treated
					that.yiwanchengList=data.data.data.Completed
					that.daipingjiaList=data.data.data.Nocomment
				})
			},
			
			jump(orderNum,status){
				if(status==2){
					uni.showToast({
						icon:"none",
						title:"用户已取消！"
					})
					return
				}
				
				uni.navigateTo({
					url:"./reserveInformation?orderNum="+orderNum
				})
			}
			
		}
	}
</script>

<style scoped lang="scss">
.mainPage {
	display: flex;
	flex-direction: column;
}
.box{
	position: relative;
	width: 100%;
	flex: auto;
	display: flex;
	flex-direction: column;
	.swiper{
		flex: auto;
	}
	.yuyuedingdan-list{
		padding: 20rpx 32rpx 100rpx;
		.yuyuedingdan-item{
			padding: 20rpx 18rpx 36rpx 34rpx;
			margin-bottom: 20rpx;
			width: 100%;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(97, 123, 185, 0.07);
			border-radius: 16rpx;
			.first-line{
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 40rpx;
				.left{
					display: flex;
					align-items: center;
					.touxiang{
						display: inline-block;
						width: 64rpx;
						height: 64rpx;
						margin-right: 12rpx;
						border-radius: 50%;
					}
					.name{
						display: inline-block;
						font-size: 28rpx;
						font-weight: 500;
						color: #0D0E15;
						line-height: 40rpx;
						margin-right: 20rpx;
						
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						width:120rpx;
					}
					.pet-info{
						text{
							padding: 0 5rpx;
						}
						display: inline-block;
						font-size: 24rpx;
						font-weight: 400;
						color: #959595;
						line-height: 34rpx;
					}
				}
				.right{
					.leixing{
						display: inline-block;
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #FA6400;
						line-height: 40rpx;
						border-radius: 30rpx;
						border: 2rpx solid #FF9636;
						margin-right: 24rpx;
						vertical-align: middle;
						padding: 10rpx 20rpx;
					}
					.zhuangtai{
						display: inline-block;
						font-size: 28rpx;
						font-weight: 400;
						color: #ED0B0D;
						line-height: 40rpx;
						vertical-align: middle;
						&.active{
							color: #AAAAAA;
						}
					}
				}
			}
			.second-line{
				margin-bottom: 28rpx;
				display: flex;
				.wenzhenleixing{
					width: 140rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #959595;
					line-height: 40rpx;
					vertical-align: middle;
				}
				.time{
					font-size: 28rpx;
					font-weight: 400;
					color: #242424;
					line-height: 40rpx;
					margin-right: 14rpx;
					vertical-align: middle;
				}
				.shijian{
					font-size: 28rpx;
					font-weight: 400;
					color: #242424;
					line-height: 40rpx;
					vertical-align: middle;
				}
			}
			.third-line{
				// margin-bottom: 28rpx;
				display: flex;
				justify-content: space-between;
				.left{
					.yuyuedianhua{
						display: inline-block;
						width: 140rpx;
						font-size: 28rpx;
						font-weight: 400;
						color: #959595;
						line-height: 40rpx;
						vertical-align: middle;
					}
					.dianhuahao{
						display: inline-block;
						font-size: 28rpx;
						font-weight: 400;
						color: #242424;
						line-height: 40rpx;
						vertical-align: middle;
					}
				}
				.right{
					font-size: 32rpx;
					font-weight: 400;
					line-height: 44rpx;
					color: #ED0B0D;
				}
			}
			.fourth-line{
				display: flex;
				align-items: center;
				.wentimiaoshu{
					width: 140rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #959595;
					line-height: 40rpx;
				}
				.wenti{
					width: 340rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #242424;
					line-height: 40rpx;
					
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}
		}
		.zanwuyuyue{
			padding-top: 450rpx;
			text-align: center;
			image{
				display: block;
				margin: auto;
				width: 220rpx;
				height: 220rpx;
				margin-bottom: 50rpx;
			}
			text{
				font-size: 28rpx;
				font-weight: 400;
				line-height: 40rpx;
				color: #959595;
			}
		}
		
		.meiyou{
			font-size: 28rpx;
			font-weight: 400;
			color: #959595;
			text-align: center;
			line-height: 40rpx;
		}
	}
	.nomore{
		position: absolute;
		bottom: 74rpx;
		left: 0;
		width: 100%;
		text-align: center;
		font-size: 28rpx;
		font-weight: 400;
		color: #959595;
		line-height: 40rpx;
	}
}
</style>
